<template>
  <div class="progress-view min-h-screen bg-background-cream">
    <div class="max-w-6xl mx-auto px-6 py-8">
      <!-- 页面标题 -->
      <div class="text-center mb-12">
        <h1 class="text-4xl md:text-5xl font-bold text-text-primary mb-4">
          我的学习进度
        </h1>
        <p class="text-xl text-text-secondary">
          查看你的学习成果和获得的成就徽章
        </p>
      </div>
      
      <!-- 学习统计卡片 -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
        <!-- 已学习 -->
        <div class="bg-white rounded-card p-6 shadow-card text-center">
          <div class="w-16 h-16 mx-auto mb-4 bg-primary-coral rounded-circle flex items-center justify-center">
            <img src="/images/icon_book_3.jpg" alt="学习" class="w-8 h-8" />
          </div>
          <h3 class="text-lg font-bold text-text-primary mb-2">已学习</h3>
          <div class="text-3xl font-bold text-primary-coral mb-2">
            {{ learnedCount }}
          </div>
          <div class="text-sm text-text-secondary">首古诗</div>
          <div class="mt-3">
            <ProgressRing :progress="learnedPercentage" :size="60" />
          </div>
        </div>
        
        <!-- 已掌握 -->
        <div class="bg-white rounded-card p-6 shadow-card text-center">
          <div class="w-16 h-16 mx-auto mb-4 bg-accent-green rounded-circle flex items-center justify-center">
            <span class="text-white text-2xl">✓</span>
          </div>
          <h3 class="text-lg font-bold text-text-primary mb-2">已掌握</h3>
          <div class="text-3xl font-bold text-accent-green mb-2">
            {{ masteredCount }}
          </div>
          <div class="text-sm text-text-secondary">首古诗</div>
          <div class="mt-3">
            <ProgressRing :progress="masteredPercentage" :size="60" stroke-color="accent-green" />
          </div>
        </div>
        
        <!-- 连续学习 -->
        <div class="bg-white rounded-card p-6 shadow-card text-center">
          <div class="w-16 h-16 mx-auto mb-4 bg-accent-yellow rounded-circle flex items-center justify-center">
            <img src="/images/badge_trophy_8.jpg" alt="连续" class="w-8 h-8" />
          </div>
          <h3 class="text-lg font-bold text-text-primary mb-2">连续学习</h3>
          <div class="text-3xl font-bold text-accent-yellow mb-2">
            {{ progressStore.progress.current_streak }}
          </div>
          <div class="text-sm text-text-secondary">天</div>
          <div class="mt-3">
            <div class="flex justify-center">
              <div class="w-12 h-12 rounded-circle bg-accent-yellow opacity-20 flex items-center justify-center">
                <span class="text-accent-yellow text-lg">🔥</span>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 总学习时间 -->
        <div class="bg-white rounded-card p-6 shadow-card text-center">
          <div class="w-16 h-16 mx-auto mb-4 bg-secondary-turquoise rounded-circle flex items-center justify-center">
            <span class="text-white text-2xl">⏱</span>
          </div>
          <h3 class="text-lg font-bold text-text-primary mb-2">学习时间</h3>
          <div class="text-3xl font-bold text-secondary-turquoise mb-2">
            {{ totalMinutes }}
          </div>
          <div class="text-sm text-text-secondary">分钟</div>
          <div class="mt-3">
            <div class="flex justify-center">
              <div class="w-12 h-12 rounded-circle bg-secondary-turquoise opacity-20 flex items-center justify-center">
                <span class="text-secondary-turquoise text-lg">📚</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 成就徽章 -->
      <div class="bg-white rounded-card p-8 shadow-card mb-12">
        <h2 class="text-2xl font-bold text-text-primary mb-8 text-center">成就徽章</h2>
        
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6">
          <!-- 已解锁的徽章 -->
          <div 
            v-for="achievement in unlockedAchievements" 
            :key="achievement.id"
            class="text-center group cursor-pointer"
            @click="showAchievementDetail(achievement)"
          >
            <div class="w-20 h-20 mx-auto mb-3 rounded-circle overflow-hidden bg-accent-yellow p-2 group-hover:scale-110 group-hover:rotate-12 transition-all duration-300 shadow-card">
              <img 
                :src="`/images/${achievement.icon}_0.jpg`" 
                :alt="achievement.name"
                class="w-full h-full object-cover"
              />
            </div>
            <h3 class="text-sm font-bold text-text-primary mb-1">{{ achievement.name }}</h3>
            <p class="text-xs text-text-secondary">{{ achievement.description }}</p>
            <p v-if="achievement.unlocked_date" class="text-xs text-accent-green mt-1">
              {{ formatDate(achievement.unlocked_date) }}
            </p>
          </div>
          
          <!-- 未解锁的徽章 -->
          <div 
            v-for="achievement in lockedAchievements" 
            :key="achievement.id"
            class="text-center opacity-50"
          >
            <div class="w-20 h-20 mx-auto mb-3 rounded-circle overflow-hidden bg-gray-200 p-2">
              <div class="w-full h-full bg-gray-300 rounded-circle flex items-center justify-center">
                <span class="text-gray-500 text-xl">?</span>
              </div>
            </div>
            <h3 class="text-sm font-semibold text-text-tertiary mb-1">???</h3>
            <p class="text-xs text-text-tertiary">完成 {{ achievement.condition.value }} 个{{ getConditionText(achievement.condition.type) }}</p>
          </div>
        </div>
      </div>
      
      <!-- 最近学习的古诗 -->
      <div class="bg-white rounded-card p-8 shadow-card mb-12">
        <h2 class="text-2xl font-bold text-text-primary mb-6">最近学习的古诗</h2>
        
        <div v-if="recentlyLearnedPoems.length === 0" class="text-center py-8">
          <div class="w-16 h-16 mx-auto mb-4 rounded-circle bg-gray-200 flex items-center justify-center">
            <img src="/images/icon_book_3.jpg" alt="空" class="w-8 h-8 opacity-50" />
          </div>
          <p class="text-text-secondary">还没有学习过古诗</p>
          <button 
            @click="$router.push('/')"
            class="mt-4 btn-primary"
          >
            开始学习
          </button>
        </div>
        
        <div v-else class="space-y-4">
          <div 
            v-for="poem in recentlyLearnedPoems" 
            :key="poem.id"
            class="flex items-center space-x-4 p-4 bg-background-cream rounded-input hover:bg-gray-50 transition-colors cursor-pointer"
            @click="$router.push(`/poetry/${poem.id}`)"
          >
            <div class="w-12 h-12 rounded-circle overflow-hidden">
              <img 
                :src="getThemeIcon(poem)" 
                :alt="poem.title"
                class="w-full h-full object-cover"
              />
            </div>
            
            <div class="flex-1">
              <h3 class="font-bold text-text-primary">{{ poem.title }}</h3>
              <p class="text-sm text-text-secondary">{{ poem.author }} · {{ poem.dynasty }}代</p>
            </div>
            
            <div class="flex items-center space-x-2">
              <div v-if="isMastered(poem.id)" class="w-6 h-6 bg-accent-green rounded-circle flex items-center justify-center">
                <span class="text-white text-xs">✓</span>
              </div>
              <div v-else-if="isLearned(poem.id)" class="w-6 h-6 bg-primary-coral rounded-circle flex items-center justify-center">
                <span class="text-white text-xs">学</span>
              </div>
              <div v-if="isFavorited(poem.id)" class="w-6 h-6 bg-accent-yellow rounded-circle flex items-center justify-center">
                <span class="text-white text-sm">★</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 学习日历 -->
      <div class="bg-white rounded-card p-8 shadow-card">
        <h2 class="text-2xl font-bold text-text-primary mb-6">学习日历</h2>
        
        <div class="text-center text-text-secondary">
          <p>学习日历功能开发中...</p>
          <p class="text-sm mt-2">将显示你的每日学习记录和连续学习天数</p>
        </div>
      </div>
    </div>
    
    <!-- 成就详情弹窗 -->
    <AchievementModal 
      v-if="selectedAchievement" 
      :achievement="selectedAchievement"
      @close="selectedAchievement = null"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { usePoetryStore } from '@/stores/poetry'
import { useProgressStore } from '@/stores/progress'
import ProgressRing from '@/components/ProgressRing.vue'
import AchievementModal from '@/components/AchievementModal.vue'
import type { Poetry, Achievement } from '@/types'

const poetryStore = usePoetryStore()
const progressStore = useProgressStore()

// 响应式数据
const selectedAchievement = ref<Achievement | null>(null)

// 计算属性
const learnedCount = computed(() => progressStore.progress.learned_poems.length)
const masteredCount = computed(() => progressStore.progress.mastered_poems.length)
const learnedPercentage = computed(() => progressStore.getProgressPercentage.value)
const masteredPercentage = computed(() => progressStore.getMasteryPercentage.value)
const totalMinutes = computed(() => progressStore.progress.total_learn_time)

const unlockedAchievements = computed(() => progressStore.getUnlockedAchievements.value)
const lockedAchievements = computed(() => progressStore.getLockedAchievements.value)

const recentlyLearnedPoems = computed(() => {
  const poemIds = progressStore.progress.learned_poems.slice(-5).reverse() // 最近5首
  return poemIds.map(id => poetryStore.getPoetryById(id)).filter(Boolean) as Poetry[]
})

// 检查学习状态
const isLearned = (poemId: number) => progressStore.progress.learned_poems.includes(poemId)
const isMastered = (poemId: number) => progressStore.progress.mastered_poems.includes(poemId)
const isFavorited = (poemId: number) => progressStore.progress.favorites.includes(poemId)

// 获取主题图标
const getThemeIcon = (poem: Poetry): string => {
  const themeMap: Record<string, string> = {
    '咏鹅': '/images/icon_goose_3.jpg',
    '静夜思': '/images/icon_moon_3.jpg',
    '春晓': '/images/theme_spring_2.jpg',
    '咏柳': '/images/theme_spring_2.jpg',
    '小池': '/images/theme_summer_5.png',
    '山行': '/images/theme_autumn_4.jpg',
    '游子吟': '/images/theme_family_5.jpg',
  }
  
  return themeMap[poem.title] || '/images/icon_book_3.jpg'
}

// 获取成就条件文本
const getConditionText = (conditionType: string): string => {
  const textMap: Record<string, string> = {
    'poems_learned': '首古诗',
    'poems_mastered': '首古诗',
    'favorites': '个收藏',
    'streak': '天'
  }
  
  return textMap[conditionType] || '个'
}

// 格式化日期
const formatDate = (dateString: string): string => {
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN', { 
    month: 'short', 
    day: 'numeric' 
  })
}

// 显示成就详情
const showAchievementDetail = (achievement: Achievement) => {
  selectedAchievement.value = achievement
}

// 初始化
onMounted(async () => {
  if (!poetryStore.poetryCollection) {
    await poetryStore.loadPoetryData()
  }
})
</script>

<style scoped>
.progress-view {
  background: linear-gradient(135deg, #FFFBF0 0%, #FFF4E6 100%);
}
</style>